<template>
  <div class="container">
    <el-row :gutter="20" class="header_demo">
      <el-col class="header_demo_1" :span="12">
        <div class="demo-basic--circle" style="height: 200px">
          <div class="block">
            <el-avatar :size="180" :src="circleUrl" />
          </div>
          <div class="right_demo">
            <h3>{{ msg }}</h3>
          </div>
          <div class="verticalBar"></div>
        </div>
        <hr />
        <div class="bottom_demo">
          <p>联系方式： {{ phone }}</p>
          <p>注册时间：{{ data }}</p>
          <p>登陆地点：{{ address }}</p>
          <p>已安全运行：{{ day }}天</p>
        </div>
      </el-col>
      <el-col :span="12" class="right_demo_msg">
        <div class="demo_msg">
          <el-tabs
            :tab-position="tabPosition"
            style="height: 200px; margin-top: 0px"
            class="demo-tabs"
          >
            <el-tab-pane label="密码更改"><PasswordChange /></el-tab-pane>
            <el-tab-pane label="信息完善"
              ><InformationPerfection
            /></el-tab-pane>
            <el-tab-pane label="更换头像"><ChangeAvatar /></el-tab-pane>
            <el-tab-pane label="账号注销"><AccountCancellation /></el-tab-pane>
          </el-tabs>
        </div>
        <hr />
        <div class="demo_invitation">
          邀请码：
          <el-input
            v-model="code"
            style="width: 240px"
            placeholder="点击获取，将出现邀请码"
          />
          <br />
          <p style="color: silver; font-size: 10px">
            验证码5分钟后将消失，请及时告知注册
          </p>
          <br />
          <el-button
            type="primary"
            style="margin-top: 20px; float: right"
            @click="getCode"
            >获取邀请码</el-button
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import PasswordChange from "../components/TabPane/PasswordChange.vue";
import InformationPerfection from "../components/TabPane/InformationPerfection.vue";
import ChangeAvatar from "../components/TabPane/ChangeAvatar.vue";
import AccountCancellation from "../components/TabPane/AccountCancellation.vue";
import { GetInvitationCode, UpdateInvitationCode } from "../api/service.js";
import { ElMessage } from "element-plus";
import { GetAvatar } from "../api/work.js";

const tabPosition = ref("left");
const code = ref("");
// const state = reactive({
//     circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
//     msg: 'admin',
//     data: '2024-08-07',
//     address: '成都',
//     day: '1109',
// })
const circleUrl = ref("");
const msg = ref("");
const data = ref("2024-08-07");
const address = ref("");
const day = ref("550");
const phone = ref("");

const Avatar = async (id: number) => {
  const result = await GetAvatar(id);
  if (result.data.code === 200) {
    const data = result.data.data;
    msg.value = data.username;
    address.value = data.address;
    circleUrl.value = data.avatar;
    phone.value = data.phone;
  }
};

const reset = () => {
  code.value = "";
};

const showCode = async () => {
  const result = await GetInvitationCode();
  console.log(result);
  if (result.data.code === 200) {
    code.value = result.data.data;
  } else {
    placeholder.value = "邀请码错误";
  }
};

const getCode = async () => {
  const result = await UpdateInvitationCode(code);
  console.log(result);
  if (result.data.code === 200) {
    ElMessage.success("验证码获取成功");
    showCode();
    setTimeout(() => {
      reset();
    }, 300000);
  } else {
    ElMessage.error("验证码获取失败");
  }
};

onMounted(() => {
  showCode();
  Avatar(1);
});
</script>

<style scoped>
.header_demo {
  /* border: 1px solid silver; */
  height: 400px;
}

.header_demo_1 {
  border: 1px solid silver;
  border-radius: 20px;
}

/* .el-avatar {
    width: 100px;
    height: 100px;
} */

.block {
  margin: 30px 30px;
}

.verticalBar {
  border: 1px solid silver;
  height: 200px;
  width: 0;
  position: relative;
  top: -225px;
  left: 15pc;
  opacity: 0.6;
  float: left;
}

.right_demo {
  font-size: 90px;
  margin-top: -45%;
  margin-left: 43%;
}

.demo_invitation {
  /* border: 1px solid red; */
  height: 160px;
  margin-top: 20px;
  width: 60%;
  margin: 20px auto;
}

.right_demo_msg {
  border: 1px solid silver;
  /* margin-left: 80px; */
  border-radius: 20px;
}

.demo-tabs {
  padding: 0px;
  color: #6b778c;
  font-size: 32px;
  font-weight: bold;
}

.el-tabs--left .el-tabs__content {
  height: 100%;
}

.demo_msg {
  /* border: 1px solid rgb(0, 0, 0); */
  margin-top: 20px;
  height: 250px;
  /* margin-top: 110px; */
}
</style>
